<template>
    <div class="wrapper">
        <div 
           class="icon"
            v-for="item of iconList"
            :key="item.id"
        >
            <div class="icon-img">
                <img 
                 class="img"
                 :class="[item.color]"
                 :src="item.imgUrl">
            </div>
            <div class="icon-desc">
                {{item.desc}}
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'homeCatalog',
    props: {
        iconList: Array
    },
    data() {
        return {
            iconList: [
                {
                    id : '00001',
                    imgUrl: '',
                    desc: '本地热推',
                    color: 'red'
                },
                {
                    id : '00002',
                    imgUrl: '',
                    desc: '亲子游',
                    color: 'orange'
                },
                {
                    id : '00003',
                    imgUrl: '',
                    desc: '温泉热卖',
                    color: 'green'
                },
                {
                    id : '00004',
                    imgUrl: '',
                    desc: '主题乐园',
                    color: 'blue'
                }
            ]
        }
    }
}
</script>
<style lang="scss" scoped>
.wrapper{
    background: #fff;
    padding-top: 0.2rem;
    .icon{
        width: 25%;
        float: left;
        .img{
            display: block;
            border-radius: 1rem;
            margin: 0 auto;
            width: 50%;
            .red{
                background: #fd6266;
            }
            .orange{
                background: #fda424;
            }
            .green{
                background: #6dcf16;
            }
            .blue{
                background: #41a9f2;
            }
        }
        .icon-desc{
            font-size: 0.32rem;
            text-align: center;
            padding-top: 0.2rem;
            padding-bottom: 0.5rem;
            border-bottom: 10px solid #edf0f5;
        }
    }
}
</style>